<!-- subpkg_archive/list/index.vue -->
<script lang="ts" setup>
import { patientListApi, removePatientApi } from '@/apis/patient';
import { useConsultStore } from '@/stores/consult';
import type { PatientItem } from '@/types/patient';
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue'

const swipeOptions = ref([
  {
    text: '删除',
    style: {
      backgroundColor: '#dd524d',
      color: '',
      fontSize: '',
    },
  },
])

// 1. 获取数据列表
const patientList = ref<PatientItem[]>([])
const getPatientList = async ()=>{
  const res = await patientListApi()
  patientList.value = res
  console.log(patientList.value);

  // 1.1 遍历数据数组
  // 如果有默认的, 则选中默认的
  // 如果没有默认的, 则选中第一个
  if(patientList.value.length > 0){
    const defaultPaitent = patientList.value.find(item => item.defaultFlag === 1)
    if(defaultPaitent){
      store.patientId = defaultPaitent.id
    } else {
      store.patientId = patientList.value[0].id
    }
  }
}
onShow(()=>{
  getPatientList()
})

// 2. 删除患者
const onSwipeActionClick = async (id: string, index: number)=>{
  const res = await uni.showModal({
    title:'温馨提示',
    content:'您确定删除该患者吗?',
  })
  if(res.confirm){
    await removePatientApi(id)
    patientList.value = patientList.value.filter(item => item.id !== id)
    uni.showToast({ title: '删除成功', icon: 'none' })

    // 判断: 如果删除的数据的id正好是store中存储的id, 则清空
    if(store.patientId === id){
      store.patientId = ''
    }
  }
}

// 3. 选择患者
const props = defineProps<{
  type: 'consult'
}>()
onShow(()=>{
  if(props.type === 'consult'){
    uni.setNavigationBarTitle({
      title:'选择患者',
    })
  } else {
    uni.setNavigationBarTitle({
      title: '患者列表',
    })
  }
})


const store = useConsultStore()
const selectPatient = (id: string)=>{
  if(props.type === 'consult'){
    store.patientId = id
  }
}

// 下一步
const goNext = () => {
  if(store.patientId === '') return uni.showToast({title: '请选择患者', icon: 'none'})
  // 跳转
  uni.navigateTo({
    url:'/subpkg_consult/payment/index',
  })
}

</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <view v-if="props.type === 'consult'">
        <view>请选择患者信息</view>
        <view>以便医生给出更准确的治疗，信息仅医生可见</view>
      </view>
      <view class="archive-tips">最多可添加6人</view>
      <uni-swipe-action>
        <uni-swipe-action-item v-for="(patient, index) in patientList" :key="patient.id" :right-options="swipeOptions"
          @click="onSwipeActionClick(patient.id, index)">
          <view class="archive-card" :class="{ active: store.patientId === patient.id }"
            @click="selectPatient(patient.id)">
            <view class="archive-info">
              <text class="name">{{ patient.name }}</text>
              <text class="id-card">{{ patient.idCard.replace(/^(.{6}).+(.{4})$/, '$1*********$2') }}</text>
              <text class="default" v-if="patient.defaultFlag === 1">默认</text>
            </view>
            <view class="archive-info">
              <text class="gender">{{ patient.genderValue }}</text>
              <text class="age">{{ patient.age }}岁</text>
            </view>
            <navigator hover-class="none" class="edit-link" :url="`/subpkg_archive/form/index?id=${patient.id}`">
              <uni-icons type="icon-edit" size="20" color="#16C2A3" custom-prefix="iconfont" />
            </navigator>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <!-- 添加按钮 -->
      <view v-if="patientList.length < 6" class="archive-card">
        <navigator class="add-link" hover-class="none" url="/subpkg_archive/form/index">
          <uni-icons color="#16C2A3" size="24" type="plusempty" />
          <text class="label">添加患者</text>
        </navigator>
      </view>
      <view v-if="props.type === 'consult'">
        <button class="uni-button" @click="goNext">下一步</button>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>